<template>
  <IFexHeaderMain class="user_center_container">
    <template #header>
      <IHeader :bankUrl="bankUrl">个人中心</IHeader>
    </template>
    <view class="user_center_main whov">
      <view class="user_center_header">
        <UserInfoHeader></UserInfoHeader>
      </view>
      <view class="user_center_oper user_count">
        <view class="count_cards">
          <template v-for="(item, index) in rowDataList">
            <view class="count_card" :key="index" v-if="item.isShow" @click="item.callback">
              <uni-icons type="calendar" size="24" color="#67c23a" class="count_icon"></uni-icons>
              <view class="count_info">
                <text class="count_label">{{ item.label }}</text>
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="user_swiper">
        <UserSwiper />
      </view>
    </view>
    <template #footer><ITabBarManager :index="1" /></template>
  </IFexHeaderMain>
</template>

<script setup lang="ts" name="userInfo">
  import UserInfoHeader from './components/UserInfoHeader.vue'
  import UserSwiper from './components/UserSwiper.vue'
  import ITabBarManager from '@/components/container/ITabBarManager.vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import { computed, ref } from 'vue'
  import { LoginStatusCheck } from '@/utils/login'
  import { useNavigatePage } from '@/hooks/navigateTo'
  import useUserInfoStore from '@/store/userInfo'
  const navigatePage = useNavigatePage()
  const userInfoStore = useUserInfoStore()
  const bankUrl = computed(() => (userInfoStore.getPlatformType == 'gld' ? '/pages/zmanager/index/index' : '/pages/invest/index/index'))
  const bankLoginUrl = computed(() => (userInfoStore.getPlatformType == 'gld' ? '/pages/zmanager/login/index' : '/pages/invest/login/index'))
  const rowDataList = ref([
    {
      label: '终端维护',
      icon: 't-icon-wodedingdan2',
      isShow: true,
      callback: () => {
        navigatePage.navigateTo('/pages/zmanager/terminal/index')
      },
    },
    {
      label: '场地明细',
      icon: 't-icon-zhifu-yue',
      isShow: userInfoStore.getUserInfo.type == '02' || userInfoStore.getUserInfo.type == '05' || userInfoStore.getUserInfo.type == '03'|| userInfoStore.getUserInfo.type == '07',
      callback: () => {
        navigatePage.navigateTo('/pages/zmanager/cdmx/index')
      },
    },
    {
      label: '修改密码',
      icon: 't-icon-zhifu-yue',
      isShow: true,
      callback: () => {
        navigatePage.navigateTo('/pages/zmanager/password/index')
      },
    },
    {
      label: '退出登录',
      icon: 't-icon-bangzhuzhongxin',
      isShow: true,
      callback: () => {
        uni.setStorageSync('shToken', '')
        uni.setStorageSync('rshToken', '')
        uni.setStorageSync('shtzrToken', '')
        uni.setStorageSync('rstzrhToken', '')
        userInfoStore.setUserInfo({ id: '' })
        navigatePage.redirectTo(bankLoginUrl.value)
      },
    },
  ])
</script>

<style scoped lang="scss">
  .user_center_container {
    background: #f1f1f1;
    .user_center_main {
      background: #f1f1f1;
      .user_center_oper {
        margin: -40rpx 20rpx 20rpx;
      }
      .user_swiper {
        margin: 0rpx 20rpx 20rpx;
        border-radius: 8rpx;
        overflow: hidden;
      }
    }
  }
  // 新增：统计区域样式
  .user_count {
    margin: 0 20rpx 30rpx;
    padding: 25rpx;
    background: #fff;
    border-radius: 12rpx;

    .count_title {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
      margin-bottom: 20rpx;
      padding-left: 5rpx;
    }

    .count_cards {
      display: flex;
      justify-content: space-between;
      gap: 15rpx;
    }

    .count_card {
      flex: 1;
      padding: 20rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f9fafb;
      border-radius: 10rpx;
      transition: all 0.3s;
    }

    .count_icon {
      margin-bottom: 15rpx;
    }

    .count_info {
      text-align: center;
    }

    .count_value {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #1d2129;
      margin-bottom: 5rpx;
    }

    .count_label {
      font-size: 24rpx;
      color: #86909c;
    }
  }
</style>
